<template>
  <div>
    <template>
      <div class="permission-container">
        <div class="app-container">
          <!-- 表格 -->
          <el-card>
            <div style="text-align: right; margin-bottom: 20px">
              <el-button
                type="primary"
                size="small"
                @click="addClick(1, '0')"
              >添加权限</el-button>
            </div>
            <el-table border :data="list" row-key="id">
              <el-table-column label="名称" prop="name" />
              <el-table-column label="标识" prop="code" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template v-slot="scope">
                  <el-button
                    type="text"
                    @click="addClick(2, scope.row.id)"
                  >添加</el-button>
                  <el-button
                    type="text"
                    @click="editClick(scope.row)"
                  >编辑</el-button>
                  <el-button
                    type="text"
                    @click="del(scope.row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-dialog :visible.sync="showDialog" title="弹层标题" @close="close">
            <!-- 表单内容 -->
            <el-form label-width="100px">
              <el-form-item label="权限名称">
                <el-input v-model="formData.name" />
              </el-form-item>
              <el-form-item label="权限标识">
                <el-input v-model="formData.code" />
              </el-form-item>
              <el-form-item label="权限描述">
                <el-input v-model="formData.description" />
              </el-form-item>
              <el-form-item label="权限启用">
                <el-switch
                  v-model="formData.enVisible"
                  active-text="启用"
                  active-value="1"
                  inactive-text="不启用"
                  inactive-value="0"
                />
              </el-form-item>
            </el-form>

            <template #footer>
              <div style="text-align: right">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click="add">确定</el-button>
              </div>
            </template>
          </el-dialog>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import {
  getPermissionList,
  addPermission,
  updatePermission,
  delPermission
} from '@/api/permisson'
import arrayToTree from 'array-to-tree'
export default {
  name: '',
  data() {
    return {
      list: [],
      showDialog: false,
      formData: {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型
      },
      isEdit: false
    }
  },
  computed: {},
  created() {
    this.getPermission()
  },
  methods: {
    async getPermission() {
      const res = await getPermissionList()
      this.list = arrayToTree(res.data, {
        parentProperty: 'pid',
        customID: 'id'
      })
    },
    addClick(type, pid) {
      this.showDialog = true
      this.formData.pid = pid
      this.formData.type = type
      this.isEdit = false
    },
    editClick(row) {
      this.showDialog = true
      this.isEdit = true
      this.formData = JSON.parse(JSON.stringify(row)) // 深拷贝
    },
    add() {
      this.isEdit ? this.doEdit() : this.doAdd()
      this.showDialog = false
      this.close()
    },
    async doAdd() {
      await addPermission(this.formData)
    },
    async doEdit() {
      await updatePermission(this.formData)
    },
    close() {
      this.formData = {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型
      }
      this.getPermission()
    },
    async del(id) {
      await delPermission(id)
      this.getPermission()
    }
  }
}
</script>
<style lang="less" scoped></style>
